import styles from './index.module.less'
import Enter from './components/enter'
import Login from './components/login'
import { useEffect, useState } from 'react'
import Button from '@/components/button'
import { getRoles } from '@/api/user'
import { useSearchParams } from 'react-router-dom'

const Index = () => {
  const params = useSearchParams()
  const [isLogin, setLogin] = useState(true)
  const [roleGroup, setRoleGroup] = useState([])
  // 角色信息获取
  const fetchRoles = async () => {
    const res = await getRoles()
    const roles = res?.data?.list || []
    setRoleGroup(roles)
    setLogin(params[0].get('to') != 2)
  }
  useEffect(() => {
    fetchRoles()
  }, [])
  return (
    <div className={styles.loginContainer}>
      <div className={styles.loginHead}>
        <img src="/images/histar-logo.webp" />
        <div className={styles.btnGroup}>
          <span className={styles.span}>{isLogin ? '没' : '已'}有账号?</span>
          {isLogin ? (
            <Button className={styles.btn} onClick={() => setLogin(false)}>
              立即注册
            </Button>
          ) : (
            <Button className={styles.btn} onClick={() => setLogin(true)}>
              登录
            </Button>
          )}
        </div>
      </div>
      <div className={styles.loginMain}>
        <img src="/images/login-bg.webp" className={styles.img} />
        <div className={styles.loginContent}>{isLogin ? <Enter /> : <Login roleGroup={roleGroup} />}</div>
      </div>
    </div>
  )
}

export default Index
